---
title: GluestackUIProvider | gluestack-ui | Usage, and API
description: GluestackUIProvider component that can be used to configure the library. It consists of StyledProvider, OverlayProvider and ToastProvider internally.
pageTitle: GluestackUIProvider
pageDescription: GluestackUIProvider component that can be used to configure the library. It consists of StyledProvider, OverlayProvider and ToastProvider internally.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';
import { config } from '@gluestack-ui/config';

<Meta title="ui/Components/Provider/GluestackUIProvider" />

import {
  GluestackUIProvider,
  Pressable,
  Button,
  Box,
  ButtonText,
} from '@gluestack-ui/themed';
import { transformedCode } from '../../../utils';
import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
import Wrapper from '../../Wrapper';

## Basic

Following is the default implementation of the **GluestackUIProvider** component without any additional customization. This serves as a starting point for users who are new to this library and want to learn about the basic functionality and appearance of the component.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
        function App(){
          return (
                <GluestackUIProvider config={config}>
                  <Button>
                    <ButtonText>Hello World</ButtonText>
                  </Button>
              </GluestackUIProvider>
          )
        }
      `,
      transformCode: (code) => {
        return transformedCode(code, 'function', 'App');
      },
      scope: {
        GluestackUIProvider,
        Pressable,
        Text,
        config,
        ButtonText,
        Box,
        Button,
        Wrapper,
      },
      argsType: {},
    }}
  />
</AppProvider>

<br />

### Import

You have to import the Provider from the library at the root level of your application

```jsx
import { GluestackUIProvider } from '@gluestack-ui/themed';
```

### Anatomy

The structure provided below can help you identify and understand a GluestackUIProvider component's various parts.

```jsx
export default () => (
  <GluestackUIProvider config={config}>{children}</GluestackUIProvider>
);
```

## Advanced

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

We have also exported all the providers separately so that you can use them individually.

### GluestackUIStyledProvider

To use only config and styled functionalities, you can use `GluestackUIStyledProvider` component.

```jsx
import { GluestackUIStyledProvider, Button, ButtonText } from '@gluestack-ui/themed';
import { config } from '@gluestack-ui/config';

export default function App() {
  return (
    <GluestackUIStyledProvider config={config}>
      <Button>
        <ButtonText>Hello World</ButtonText>
      </Button>
    </GluestackUIStyledProvider>
  )
}
```

### OverlayProvider

To use only overlay functionalities, you can use `OverlayProvider` component.

```jsx
import { OverlayProvider } from '@gluestack-ui/overlay';
```

### ToastProvider

We have separated `ToastProvider` and `OverlayProvider` so that you can use them individually and decide the priority of the provider.

```jsx
import { ToastProvider } from '@gluestack-ui/toast';
```

To create your own provider, here is the example of how you can create your own provider.

```jsx
import React from 'react';
import { createProvider } from '@gluestack-ui/provider';
import { StyledProvider } from '@gluestack-style/react';
import { OverlayProvider } from '@gluestack-ui/overlay';
import { ToastProvider } from '@gluestack-ui/toast';

const GluestackUIStyledProvider = createProvider({ StyledProvider });

const GluestackUIProvider = ({ children, ...props }: any) => {
  return (
    <GluestackUIStyledProvider {...props}>
      <OverlayProvider>
        <ToastProvider>{children}</ToastProvider>
      </OverlayProvider>
    </GluestackUIStyledProvider>
  );
};
```

### Customizing the Provider

We have a function called `createProvider` which can be used to create provider with `StyledProvider` exported from `@gluestack-style/react`. You can pass configuration object which consists theme. You can change the theme object specific to your brand. Refer [gluestack.io/style](/style) for more information on how to create a theme.

#### Usage

You can import the config For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Provider).

```jsx
// import the createProvider function
import { createProvider } from '@gluestack-ui/provider';
import { config } from '@gluestack-ui/config';
import { StyledProvider } from '@gluestack-style/react';

export const Provider = createProvider({
  StyledProvider,
});

// Using the Provider component
export default () => (
  <Provider config={config}>
    <Text />
  </Provider>
);
```

You can also create GluestackUIProvider component which can be used to wrap your entire application. This will make sure that all the components are wrapped with the provider with styling and other providers like OverlayProvider and ToastProvider.

```jsx
// import the createProvider function
import { StyledProvider } from '@gluestack-style/react';
import { OverlayProvider } from '@gluestack-ui/overlay';
import { ToastProvider } from '@gluestack-ui/toast';

const GluestackUIStyledProvider = createProvider({ StyledProvider });

const GluestackUIProvider = ({ children, ...props }: any) => {
  return (
    <GluestackUIStyledProvider {...props}>
      <OverlayProvider>
        <ToastProvider>{children}</ToastProvider>
      </OverlayProvider>
    </GluestackUIStyledProvider>
  );
};
```
